<template>
  <div>
    <scroll-view scroll-y="true" :style="{height:windowHeight+'px'}">
      <a v-for="(item,index) in goods_list" :key="index" :class="[index===active_index ?'classify-selected':'classify']" @click="scrollGoods(item,index)">{{item.name}}</a>
    </scroll-view>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      windowHeight:0,
    }
  },
  computed: {
    ...mapGetters([
      'goods_list',
      'active_index'
    ])
  },
  methods: {
    ...mapActions([
      'setTopFixName',
      'setToView',
      'setActiveIndex'
    ]),
    scrollGoods(item, index){
      this.setTopFixName(item.name)
      this.setToView('a' + index)
      this.setActiveIndex(index)
    }
  },
  beforeMount(){
    var self = this
    wx.getSystemInfo({
      success(res){
        self.windowHeight = res.windowHeight-55
      }
    })
  }
}
</script>

<style >
.classify{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-bottom: 1px solid #E3E3E3;
  color: #6C6C6C;
  font-size: 14px;
}
.classify-selected{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: black;
  font-weight: bold;
  border-bottom:1px solid #E3E3E3;
  border-left:4px solid #4D4D4D;
  background:white;
  font-size: 14px;
}
</style>
